<script lang="ts" setup>
import { NIcon, useThemeVars } from 'naive-ui';

import { RouterLink, useRoute } from 'vue-router';
import { Heart, Home2, Menu2 } from '@vicons/tabler';

import { storeToRefs } from 'pinia';
import HeroGradient from '../assets/hero-gradient.svg?component';
import MenuLayout from '../components/MenuLayout.vue';
import NavbarButtons from '../components/NavbarButtons.vue';
import { useStyleStore } from '@/stores/style.store';
import { config } from '@/config';
import type { ToolCategory } from '@/tools/tools.types';
import { useToolStore } from '@/tools/tools.store';
import { useTracker } from '@/modules/tracker/tracker.services';
import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';

const themeVars = useThemeVars();
const styleStore = useStyleStore();
const version = config.app.version;
const commitSha = config.app.lastCommitSha.slice(0, 7);
const { tracker } = useTracker();
const { t } = useI18n();

const toolStore = useToolStore();
const { favoriteTools, toolsByCategory, category } = storeToRefs(toolStore);
const tools = computed<ToolCategory[]>(() => [
  ...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
  ...toolsByCategory.value,
]);
const { setCategory } = toolStore

</script>

<template>
  <div class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
    <div flex items-center justify-center class="t-header">
      <div class="t-category" flex item-center flex-1>
        <div class="t-category-item" key="all" :class="{ active: category === '' }" @click="setCategory('')">
          <svg xmlns="http://www.w3.org/2000/svg" class="t-category-item-icon" viewBox="0 0 24 24" fill="none"
            stroke="currentColor">
            <path
              d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM9.6 16.2C9.6 17.19 8.79 18 7.8 18C6.81 18 6 17.19 6 16.2C6 15.21 6.81 14.4 7.8 14.4H8.6C9.15 14.4 9.6 14.85 9.6 15.4V16.2ZM9.6 8.6C9.6 9.15 9.15 9.6 8.6 9.6H7.8C6.81 9.6 6 8.79 6 7.8C6 6.81 6.81 6 7.8 6C8.79 6 9.6 6.81 9.6 7.8V8.6ZM14.15 13.25C14.15 13.74 13.75 14.15 13.25 14.15H10.74C10.25 14.15 9.84 13.75 9.84 13.25V10.74C9.84 10.25 10.24 9.84 10.74 9.84H13.25C13.74 9.84 14.15 10.24 14.15 10.74V13.25ZM16.2 18C15.21 18 14.4 17.19 14.4 16.2V15.4C14.4 14.85 14.85 14.4 15.4 14.4H16.2C17.19 14.4 18 15.21 18 16.2C18 17.19 17.19 18 16.2 18ZM16.2 9.6H15.4C14.85 9.6 14.4 9.15 14.4 8.6V7.8C14.4 6.81 15.21 6 16.2 6C17.19 6 18 6.81 18 7.8C18 8.79 17.19 9.6 16.2 9.6Z" />
          </svg>
          <span>全部</span>
        </div>
        <div class="t-category-item" v-for="v in toolsByCategory" :key="v.name"
          @click="setCategory(v.name)"
          :class="{ active: category === v.name }">
          <component class="t-category-item-icon" :is="v.components[0].icon"></component>
          <span>{{ v.name }}</span>
        </div>
      </div>
      <command-palette />
    </div>
    <slot />

  </div>
</template>

<style lang="less" scoped>
::v-deep(.n-layout-scroll-container) {
  @percent: 4%;
  @position: 25px;
  @size: 50px;
  @color: #eeeeee25;
  background-image: radial-gradient(@color @percent, transparent @percent),
    radial-gradient(@color @percent, transparent @percent);
  background-position: 0 0, @position @position;
  background-size: @size @size;
}

::v-deep(.n-layout-header) {
  border-radius: 200px;
}

.support-button {
  background: rgb(37, 99, 108);
  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
  color: #fff !important;
  transition: padding ease 0.2s !important;

  &:hover {
    color: #fff;
    padding-left: 30px;
    padding-right: 30px;
  }
}

.menu-layout {
  padding: 24px 136px;
}

.t-header {
  border-radius: 99px;
  background: #FFF;
  color: #999AAA;
  .t-category {
    display: flex;
    padding: 2px 4px;
    align-items: center;
    gap: 12px;

    &-item {
      display: flex;
      align-items: center;
      padding: 10px;
      gap: 4px;
      border-radius: 18px;
      background-color: #fff;
      cursor: pointer;
      &-icon {
        width: 16px;
        height: 16px;
      }

      &.active {
        color: #6D5FFD;
        background: rgba(109, 95, 253, 0.05);

      }
    }
  }
}

.hero-wrapper {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  z-index: 10;
  overflow: hidden;

  .gradient {
    margin-top: -65px;
  }

  .text-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 16px;
    color: #fff;

    .title {
      font-size: 25px;
      font-weight: 600;
    }

    .divider {
      width: 50px;
      height: 2px;
      border-radius: 4px;
      background-color: v-bind('themeVars.primaryColor');
      margin: 0 auto 5px;
    }

    .subtitle {
      font-size: 16px;
    }
  }
}
</style>
